<!--添加规则页面-->
<template>
  <el-dialog :visible.sync="open" width="1000px" :close-on-click-modal="false" append-to-body>
    <div>
      <el-form ref="ruleForm" style="margin: 0 auto;width: 50%;" label-width="auto" :model="monitorRuleInfo">
        <el-form-item label="规则名称：" prop="name">
          <el-input v-model="monitorRuleInfo.name" placeholder="0" style="width: 330px" prop="name"></el-input>
        </el-form-item>
        <el-form-item label="监控类型：" prop="analyseType">
          <el-radio-group v-model="monitorRuleInfo.analyseType">
            <el-radio label="数值">数值分析</el-radio>
            <el-radio label="对比">对比分析</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="规则级别：" prop="ruleLevel">
          <el-radio-group v-model="monitorRuleInfo.ruleLevel" >
            <el-radio label="table">表级</el-radio>
            <el-radio label="fields">字段级</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--如果选择表级别-->
        <div v-if="monitorRuleInfo.ruleLevel=='table'">
          <el-form-item label="计算类型：" prop="calculateType" align="left">
            <el-select v-model="monitorRuleInfo.calculateType" placeholder="请选择规则" style="width: 330px">
              <el-option label="总行数" value="countAll" style="width: 330px"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!--如果选择字段级别，需要添加字段-->
        <div v-if="monitorRuleInfo.ruleLevel=='fields'">
          <el-form-item label="选择字段：" prop="fieldsName" align="left">
<!--            <el-input v-model="monitorRuleInfo.fieldsName" placeholder="0" style="width: 330px"></el-input>-->
            <el-select v-model="monitorRuleInfo.fieldsName" placeholder="请选择" class="dialog-input" style="width: 330px">
              <el-option v-for="(item,index) in fieldList" :key="item.index" :label="item.name"
                         :value="item.name"/>
            </el-select>
          </el-form-item>
          <el-form-item label="计算类型：" prop="calculateType" align="left">
            <el-select v-model="monitorRuleInfo.calculateType" placeholder="请选择规则" style="width: 330px">
              <el-option label="空值率" value="nvlRate"></el-option>
              <el-option label="重复率" value="repeatRate"></el-option>
              <el-option label="求和" value="sum"></el-option>
              <el-option label="均值" value="avg"></el-option>
              <el-option label="最大值" value="max"></el-option>
              <el-option label="最小值" value="min"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!--公共部分   这里有bug，如果多个分区需要-->
        <el-form-item label="基准分区表达式：" v-model="monitorRuleInfo.basePartitionDef" prop="basePartitionDef"
                      align="left">
            <div v-for="(item,key) in partitionList" :key="key">
              <el-input v-model="monitorRuleInfo.basePartitionDef.dsl" placeholder="0" style="width: 330px">
                <template slot="prepend" v-model="monitorRuleInfo.basePartitionDef.name">{{ item.name }}</template>
                <el-button slot="append" icon="el-icon-search" @click="debugDSL(monitorRuleInfo.basePartitionDef)">测试</el-button>
              </el-input>
            </div>

        </el-form-item>
        <el-form-item label="检查分区表达式：" v-model="monitorRuleInfo.checkPartitionDef" prop="checkPartitionDef"
                      align="left">
            <tr v-for="(item,key) in partitionList" :key="key">
              <el-input v-model="monitorRuleInfo.checkPartitionDef.dsl" placeholder="0" style="width: 330px">
                <template slot="prepend">{{ item.name }}</template>
                <el-button slot="append" icon="el-icon-search" @click="debugDSL(monitorRuleInfo.checkPartitionDef)">测试</el-button>
              </el-input>
            </tr>
        </el-form-item>
        <el-form-item label="固定值：">
          <el-input placeholder="请输入内容" v-model="monitorRuleInfo.fixedValue" class="input-with-select"
                    style="width: 330px">
            <el-select v-model="monitorRuleInfo.fixedCompareWay" slot="prepend" placeholder="请选择">
              <el-option label="<=" value="<="></el-option>
              <el-option label=">=" value=">="></el-option>
              <el-option label="<" value="<"></el-option>
              <el-option label=">" value=">"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="波动率：" prop="table_alarm" v-model="monitorRuleInfo.ifSwingUsed">
          <el-input placeholder="请输入内容" v-model="monitorRuleInfo.swingUpper" style="width: 330px">
            <template slot="prepend">上限</template>
          </el-input>
          <br>
          <el-input placeholder="请输入内容" v-model="monitorRuleInfo.swingLower" style="width: 330px">
            <template slot="prepend">下限</template>
          </el-input>
        </el-form-item>
        <el-button type="primary" @click="add" style="margin-left: 500px">提交</el-button>
        <!--        <el-button type="primary" @click="dialogRoleVisible = false"  style="margin-left: 500px">取消</el-button>-->
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import api from '@/api/monitor/monitor'
import ruleApi from '@/api/monitor/rule'
import executeApi from '@/api/monitor/execute'
export default {

  data() {
    return {
      open: false,
      // 弹出层标题
      title: "新建规则",
      dialogRoleVisible: false,
      partitionList: [],
      fieldList:[],
      db_name: "",
      table_name: "",
      monitorRuleInfo: {
        id: null,
        ruleCollectionId:0,
        name: "",
        analyseType: "",
        ruleLevel: "",
        basePartitionDef:
          {
            name: "",
            dsl: "",
            type: "String"
          }
        ,
        checkPartitionDef:
          {
            name: "",
            dsl: "",
            type: "String"
          }
        ,
        fieldsName: null,
        calculateType: "",
        fixedCompareWay: "",
        fixedValue: null,
        swingUpper: null,
        swingLower: null
      },
      partitionDef:{
        name:"",
        dsl:"",
        type:""
      }
    }
  },

  mounted() {
    // this.init()
    // this.getPartitionList()
  },
  methods: {
    init(tableName,dbName,collectionId) {
      this.db_name = dbName;
      this.table_name = tableName;
      this.monitorRuleInfo.ruleCollectionId = collectionId
      this.open = true;
      this.title = "添加规则";
      console.log("333333"+collectionId)
      this.getTableDetailList()
    },
    // // 加载banner列表数据
    // init(table_name,db_name) {
    //   this.table_name = table_name;
    //   this.db_name = db_name;
    //   // this.monitorRuleInfo.ruleCollectionId = collectionId
    //   this.open = true;
    //   this.title = "添加规则";
    //
    //
    //
    //   console.log(this.table_name)
    //   // this.getPartitionList()
    //
    //   // this.oneRuleById(id)
    //   // api.get(){
    //   //
    //   // }
    // },

    getTableDetailList() {
      api.getMonitorHiveMetaByTableName(this.db_name, this.table_name).then((response) => {
        console.log("-----------------response.data" + response.data)
        if (response.code == 200) {
          this.partitionList = response.data.partitionKeys
          this.postName()
          this.fieldList = response.data.sd.cols
          // this.getList()
        } else
          "错误";
        // })
        //   this.result = response;
        // })
        //   .catch((response) => {
        //     console.log("失败" + response);
        //     // Vue.$message.error('服务器错误，请稍后再试')
        //     //reject(response)
      })
    },
    add() {
      console.log("111111"+JSON.stringify(this.monitorRuleInfo))

      ruleApi.addMonitorRule(this.monitorRuleInfo).then((response) => {
        console.log("-----------------" + response.data)
        if (response.code == 200) {
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
          this.open = false;
          //刷新父页面
          parent.location.reload();
          this.$emit("fevent")
        } else
          "错误";
        // })
        //   this.result = response;
        // })
        //   .catch((response) => {
        //     console.log("失败" + response);
        //     // Vue.$message.error('服务器错误，请稍后再试')
        //     //reject(response)
      });
    },
    debugDSL(partitionDef){
      console.log("11111111---"+JSON.stringify(this.monitorRuleInfo.basePartitionDef))
      console.log("111-----"+JSON.stringify(this.partitionDef))
      executeApi.debugDsl(partitionDef).then((response) => {
        console.log("-----------------" + response.data)
        if (response.code == 200) {
          this.$notify({
            title: '成功',
            message: '测试成功',
            type: 'success',
            duration: 2000
          })
        } else
          "错误";
      });
    },
    oneRuleById(id) {
      api.oneRuleById(id).then((response) => {
        console.log("-----------------" + response.result)
        if (response.code == 200) {
          this.monitorRuleInfo = response.result
          this.monitorRuleInfo.prePartitionExpr = JSON.parse(response.result.prePartitionExpr)
          this.monitorRuleInfo.lastPartitionExpr = JSON.parse(response.result.lastPartitionExpr)
          // console.log("11111"+JSON.stringify(this.monitorRuleInfo.prePartitionExpr))
          // console.log(this.monitorRuleInfo.lastPartitionExpr)
        } else
          "错误";
      });
    },
    updateOneRule() {
      console.log("111111" + JSON.stringify(this.monitorRuleInfo))
      api.updateOneRule(this.monitorRuleInfo).then((response) => {
        if (response.code == 200) {
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
          this.open = false;
          parent.location.reload();
          this.$emit("fevent")
        } else
          "错误";
        // })
        //   this.result = response;
        // })
        //   .catch((response) => {
        //     console.log("失败" + response);
        //     // Vue.$message.error('服务器错误，请稍后再试')
        //     //reject(response)
      });
    },
    postName(){
      this.partitionList.forEach(item=>{
        this.monitorRuleInfo.checkPartitionDef.name=item.name
        this.monitorRuleInfo.basePartitionDef.name=item.name
      })
    }
  }

};
</script>
<style>
.my-label {
  /*background: #E1F3D8;*/
  width: 200px;
}

.el-button--mini, .el-button--mini.is-round {
  padding: 7px 6px
}

.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}


</style>

